<template>
  <el-card>
    <el-table :data="tableData">
      <el-table-column label="是否拥有" width="100" prop="hasPermission">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.hasPermission" @change="handleChange($event, scope.row.id)"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id" width="60"></el-table-column>
      <el-table-column label="权限名" prop="permissionName"></el-table-column>
      <el-table-column label="权限码" prop="permissionCode"></el-table-column>
      <el-table-column label="描述" prop="description"></el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalSize"
        background
        layout="prev, pager, next">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { getInfoByRoleIdWithAll } from '@/api/auth/permission'
import { formatPermissionPaginationDataWithCheck } from '@/utils/format'
import { insertRolePermission, deleteRolePermission } from '@/api/auth/role-permission'

export default {
  name: 'PermissionTable',
  props: {
    roleId: Number
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      totalSize: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getDataList()
    },
    handleChange(event, val) {
      if(event) {
        insertRolePermission({
          permissionId: val,
          roleId: this.roleId
        }).then(res => {
          if(res.data.code !== 200) {
            // this.$message.error({
            //   message: res.data.message,
            //   duration: 1000
            // })
          }
        })
      } else {
        deleteRolePermission({
          permissionId: val,
          roleId: this.roleId
        }).then(res => {
          if(res.data.code !== 200) {
            // this.$message.error({
            //   message: res.data.message,
            //   duration: 1000
            // })
          }
        })
      }
    },
    getDataList() {
      getInfoByRoleIdWithAll({
        roleId: this.roleId,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        if(res.data.code === 200) {
          this.tableData = formatPermissionPaginationDataWithCheck(res.data.pageResult.dataList)
          this.totalSize = res.data.pageResult.totalCount
        } else {
          // this.$message.error({
          //   message: res.data.message,
          //   duration: 1000
          // })
        }
      })
    }
  },
  created() {
    this.getDataList()
  },
  watch: {
    roleId() {
      this.currentPage = 1
      this.getDataList()
    }
  }
}
</script>

<style scoped>

</style>
